<!-- 项目成员 -->
<template>
  <div>
    <!-- 成员列表 -->
    <s-table
      :columns="$auth('PROJECT.PROJECT_MEMBER_LIST') ? memberColumns: []"
      bordered
      :data="loadMemberData"
      :row-key="record => record.id"
      ref="memberTableRef"
    >
      <template slot="title">
        <div style="display: flex;justify-content:space-between;}">
          <span class="title">团队成员管理</span>
          <a-button type="primary" icon="plus" @click="activeAddMembers()" v-if="$auth('PROJECT.PROJECT_MEMBER_ADD')">添加</a-button>
        </div>
      </template>
      <template slot="phone" slot-scope="text, record">
        {{ record.phone }}
      </template>
      <template slot="email" slot-scope="text, record">
        {{ record.email }}
      </template>
      <template slot="status" slot-scope="text, record">
        {{ record.status | enumValueByKey($const.INVITATION_STATUS) }}
      </template>
      <template slot="operate" slot-scope="text, record">
        <a @click="clickView(record)" style="margin-right: 10px" v-if="$auth('PROJECT.PROJECT_MEMBER_DETAIL')">查看</a>
        <a-popconfirm title="是否确认取消邀请？" @confirm="clickCancel(record)">
          <a v-if="$auth('PROJECT.PROJECT_MEMBER_EDIT') && record.status === 1" style="margin-right: 10px">取消</a>
        </a-popconfirm>
        <a-popconfirm title="确定重新邀请？" @confirm="clickReinvite(record)">
          <a v-if="$auth('PROJECT.PROJECT_MEMBER_EDIT') && record.status === 1" style="margin-right: 10px">重新邀请</a>
        </a-popconfirm>
        <a-popconfirm title="是否确认删除？" @confirm="clickRemove(record)">
          <a v-if="$auth('PROJECT.PROJECT_MEMBER_EDIT') && record.status === 2">删除</a>
        </a-popconfirm>
      </template>
    </s-table>
    <!-- 团队成员新增弹框 -->
    <GroupMemberModal
      :projectId="projectId"
      :invitedType="invitedType"
      :modalVisible="modalVisible"
      :modalTitle="modalTitle"
      @closeInvitateModal="closeInvitateModal" />
    <!-- 查看团队成员信息弹框 -->
    <ViewMemberModal
      :viewModalVisible="viewModalVisible"
      ref="viewMenberRef"
      @closeViewModal="closeViewModal" />
    <div style="margin: 20px 0"></div>
    <!-- 中心列表 -->
    <s-table
      v-if="$auth('PROJECT.PROJECT_RESEARCH')"
      :columns="$auth('PROJECT.PROJECT_RESEARCH_LIST') ? researchColmns:[]"
      bordered
      :data="loadCenterData"
      ref="centerTableRef"
      :row-key="record => record.id"
    >
      <template slot="title">
        <div style="display: flex;justify-content:space-between;}">
          <span class="title">研究中心管理</span>
          <a-button type="primary" icon="plus" @click="activeAddCenter()" v-if="$auth('PROJECT.PROJECT_RESEARCH_ADD')">添加</a-button>
        </div>
      </template>
      <template slot="active" slot-scope="text, record">
        <span>{{ record.active === 1 ? '活跃' : (record.active === 2 ? '不活跃' : '') }}</span>
      </template>
      <template slot="operate" slot-scope="text, record">
        <a @click="clickEdit(record,false)" style="margin-right: 10px" v-if="!$auth('PROJECT.PROJECT_RESEARCH_EDIT') && $auth('PROJECT.PROJECT_RESEARCH_DETAIL')" >查看</a>
        <a @click="clickEdit(record)" style="margin-right: 10px" v-if="$auth('PROJECT.PROJECT_RESEARCH_EDIT')">编辑</a>
        <a-popconfirm title="是否确认删除？" @confirm="clickDelete(record)" >
          <a v-if="$auth('PROJECT.PROJECT_RESEARCH_DELETE')">删除</a>
        </a-popconfirm>
        <a-divider type="vertical" />
        <a @click="clickEditGroup(record, false)" v-if="!$auth('PROJECT.PROJECT_RESEARCH_MEMBER_EDIT') && $auth('PROJECT.PROJECT_RESEARCH_MEMBER_LIST')" style="margin-right: 10px">查看研究团队</a>
        <a @click="clickEditGroup(record)" v-if="$auth('PROJECT.PROJECT_RESEARCH_MEMBER_EDIT')" style="margin-right: 10px">编辑研究团队</a>
      </template>
    </s-table>
    <!-- 中心新增弹框 -->
    <AddCenterModal :visible="centerVisible" @completeAdd="completeAdd" ref="centerModalRef" />
    <!-- 中心编辑弹框 -->
    <UpdateCenterModal :updateCenterVisible="updateCenterVisible" @closeUpdateModal="closeUpdateModal" ref="updateCenterModalRef" />
    <!-- 研究团队弹框 -->
    <ResearchGroup :updateResearchGroupVisible="updateResearchGroupVisible" @closeResearchGroup="closeResearchGroup" ref="updateResearchGroupRef" />
  </div>
</template>

<script>
import monitor from '@/utils/monitor'
import members from '@/monitor/views/overview/detail/responsible/components/members/members.js'

import { memberList, deleteMember, centerList, deleteCenter, reinviteMember } from '@/api/overview/member'
import AddCenterModal from './members/AddCenterModal'
import UpdateCenterModal from './members/UpdateCenterModal'
import AddMemberModal from '@/components/InvitationModal/index'
import GroupMemberModal from '@/components/InvitationModal/GroupMemberModal'
import ViewMemberModal from './members/ViewMemberModal'
import ResearchGroup from './members/ResearchGroup'
import { buildPaginationObj } from '@/components/Table'
const watch = monitor(members)

const memberColumns = [
  {
    title: '成员编号',
    key: 'proUserNo',
    dataIndex: 'proUserNo'
  },
  {
    title: '姓名',
    key: 'name',
    dataIndex: 'name'
  },
  {
    title: '角色',
    key: 'roleName',
    dataIndex: 'roleName'
  },
  {
    title: '电话/手机',
    key: 'phone',
    dataIndex: 'phone',
    scopedSlots: { customRender: 'phone' }
  },
  {
    title: '邮件地址',
    key: 'email',
    dataIndex: 'email',
    scopedSlots: { customRender: 'email' }
  },
  {
    title: '邀请状态',
    key: 'status',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    key: 'operate',
    scopedSlots: { customRender: 'operate' }
  }
]
const researchColmns = [
  {
    title: '中心编号',
    key: 'researchCenterNo',
    dataIndex: 'researchCenterNo'
  },
  {
    title: '中心名称',
    key: 'orgName',
    dataIndex: 'orgName'
  },
  {
    title: '英文名称',
    key: 'enName',
    dataIndex: 'enName'
  },
  {
    title: '短名称',
    key: 'shortName',
    dataIndex: 'shortName'
  },
  {
    title: '科室',
    key: 'orgDeptName',
    dataIndex: 'orgDeptName'
  },
  {
    title: '中心负责人',
    key: 'researchName',
    dataIndex: 'researchName'
  },
  {
    title: '中心CRC',
    key: 'userName',
    dataIndex: 'userName'
  },
  {
    title: '活跃状态',
    key: 'active',
    dataIndex: 'active',
    scopedSlots: { customRender: 'active' }
  },
  {
    title: '操作',
    key: 'operate',
    scopedSlots: { customRender: 'operate' }
  }
]
export default {
  components: {
    AddCenterModal,
    UpdateCenterModal,
    AddMemberModal,
    GroupMemberModal,
    ViewMemberModal,
    ResearchGroup
  },
  data () {
    return {
      // 研究中心
      centerVisible: false,
      updateCenterVisible: false,
      // memberColumns: this.$options.filters.isHasAuth(this.$const.ROLE_TYPE.PM.value) ? memberColumns : memberColumnsList, // PM和其他的角色看到的columns不一样
      memberColumns, // 不区分角色都能看到操作栏
      // researchColmns: this.$options.filters.isHasAuth(this.$const.ROLE_TYPE.PM.value) ? researchColmns : researchColmnsList,
      researchColmns, // 不区分角色都能看到操作栏
      queryParamCenter: {
        proId: this.$route.query.id,
        deleted: 0 // 后端让传的写死的字段
      },
      loadCenterData: parameter => {
        if (this.$auth('PROJECT.PROJECT_RESEARCH_LIST')) {
          if (this.$route.query.id) {
            return centerList(Object.assign(parameter, this.queryParamCenter)).then(res => {
              return res
            })
          }
        } else {
          return Promise.resolve(buildPaginationObj([]))
        }
      },
      // 研究团队
      projectId: null, // 传给子组件（研究团队成员）的项目Id
      invitedType: 2, // 传给子组件（研究团队成员）的被邀请人类型 2代表团队成员
      modalVisible: false, // 子组件（研究团队成员）是否显示
      viewModalVisible: false, // 查看团队成员信息
      modalTitle: '添加团队成员', // 子组件（研究团队成员）标题
      queryParamMember: {
        proId: this.$route.query.id
      },
      loadMemberData: parameter => {
        if (this.$auth('PROJECT.PROJECT_MEMBER_LIST')) {
          if (this.$route.query.id) {
            return memberList(Object.assign(parameter, this.queryParamMember)).then(res => {
              return res
            })
          }
        } else {
          return Promise.resolve(buildPaginationObj([]))
        }
      },
      updateResearchGroupVisible: false
    }
  },
  methods: watch({
    /* ********团队成员******** */
    // 添加团队成员
    activeAddMembers () {
      // this.$refs.addMemberRef.toggleModal()
      this.projectId = this.$route.query.id
      this.modalVisible = true
    },
    // 添加团队成员对话框关闭
    closeInvitateModal (val) {
      if (val) {
        this.$refs.memberTableRef.refresh(true)
      }
      this.modalVisible = false
    },
    // 点击查看团队成员信息
    clickView (record) {
      this.viewModalVisible = true
      this.$refs.viewMenberRef.getMemberDetail(record.id)
      this.viewMember()
      console.log('点击了查看')
    },
    // 查看团队成员对话框关闭
    closeViewModal () {
      this.viewModalVisible = false
    },
    // 点击取消
    clickCancel (record) {
      console.log('点击了取消')
      this.cancelInviteMember()
      deleteMember({ id: record.id })
        .then(res => {
          this.$emit('cancelMember')
          this.$refs.memberTableRef.refresh(true)
          this.$message.success('取消成功')
        })
        .catch(() => {})
    },
    // 点击重新邀请
    clickReinvite (record) {
      reinviteMember({ proId: this.$route.query.id, invitedUserId: record.userId })
        .then(res => {
          // this.$emit('cancelMember')
          this.$refs.memberTableRef.refresh(true)
          this.$message.success('重新邀请成功')
        })
        .catch(() => {})
    },
    // 点击移出
    clickRemove (record) {
      console.log('点击了移出')
      this.removeMember()
      deleteMember({ id: record.id })
        .then(res => {
          this.$emit('cancelMember')
          this.$refs.memberTableRef.refresh(true)
          this.$message.success('删除成功')
        })
        .catch(() => {})
    },
    /* ********研究中心******** */
    // 添加中心
    activeAddCenter () {
      this.centerVisible = true
      this.$refs.centerModalRef.form = {} // 将对话框置空
    },
    // 点击编辑
    clickEdit (record, boo = true) {
      console.log('点击了编辑')
      this.updateCenterVisible = true
      // this.$refs.updateCenterModalRef.reloadData(record.id)
      this.$refs.updateCenterModalRef.getCenterDetail(record.id)
      this.$refs.updateCenterModalRef.isHidden = true
      if (!boo) { // 只可查看
        this.$refs.updateCenterModalRef.isHidden = false
      }
      this.$forceUpdate()
      this.viewCenter()
    },
    // 研究中心点击删除
    clickDelete (record) {
      console.log('点击了删除')
      deleteCenter({ id: record.id })
        .then(res => {
          this.$refs.centerTableRef.refresh(true)
        })
        .catch(() => {})
    },
    // 研究中心添加完成
    completeAdd (val) {
      this.centerVisible = false
      if (val) {
        this.$refs.centerTableRef.refresh(true)
      }
    },
    // 研究中心编辑对话框关闭
    closeUpdateModal (val) {
      this.updateCenterVisible = false
      if (val) {
        this.$refs.centerTableRef.refresh(true)
      }
    },
    // 点击研究团队编辑
    clickEditGroup (row, boo = true) {
      console.log(row, `color:blue;`)
      this.updateResearchGroupVisible = true
      this.$refs.updateResearchGroupRef.reloadData(row.id)
      if (!boo) { // 只可查看
        this.$refs.updateResearchGroupRef.isHidden = true
      }
      // this.$refs.updateResearchGroupRef.toggleColumns()
      this.$forceUpdate()
    },
    // 研究团队对话框关闭
    closeResearchGroup () {
      this.updateResearchGroupVisible = false
      this.$refs.centerTableRef.refresh(true)
    },
    // 查看(编辑)研究中心埋点
    viewCenter () {},
    // 查看团队成员埋点
    viewMember () {},
    // 取消团队成员邀请埋点
    cancelInviteMember () {},
    // 移除团队成员埋点
    removeMember () {}
  })
}
</script>
<style scoped lang="less">
.title {
  line-height: 32px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: bold;
  font-size: 16px;
}
</style>
